<template>
  <view class="tab-page group">
    <view class="nav-bar">
      <view class="nav-search">
        <uni-search-bar @focus="onFocusSearch" cancelButton="none"
                        placeholder="点击搜索圈子"></uni-search-bar>
      </view>
      <view class="nav-add" @click="onCreateNewGroup()">
        <uni-icons type="plus" size="32"></uni-icons>
      </view>


    </view>
    <view class="group-tip" v-if="circleStore.myCircles.length===0 && circleStore.joinedGroups.length===0">
      温馨提示：您现在还没有加入任何圈子，点击右上方'+'按钮可以创建圈子哦~
    </view>

    <view class="group-items" v-else>
      <scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
        <uni-swipe-action>
          <view class="xw-book-wrapper" v-if="circleStore.myCircles.length > 0">
            <view class="xw-book-sort">我管理的圈子</view>
          </view>
          <uni-swipe-action-item class="favorites-uni-swipe-action-item" v-for="(circle,i) in circleStore.myCircles"
                                 :key="i">
            <circle-item :today-add="circle.todayAdd" :circle="circle"></circle-item>
            <template v-slot:right v-if="circle.ownerId == mine.id">
              <view class="favorites-wx-action-item">
                <view class="favorites-wx-action-item-btn favorites-wx-delete" @click="deleteCircle(circle.id, i)">解散
                </view>
              </view>
            </template>
          </uni-swipe-action-item>

          <view class="xw-book-wrapper" v-if="circleStore.joinedGroups.length > 0">
            <view class="xw-book-sort">我加入的圈子</view>
          </view>
          <uni-swipe-action-item class="favorites-uni-swipe-action-item"
                                 v-for="(circle,i) in circleStore.joinedGroups" :key="i">
            <circle-item :today-add="circle.todayAdd" :circle="circle"></circle-item>
            <template v-slot:right>
              <view class="favorites-wx-action-item">
                <view class="favorites-wx-action-item-btn favorites-wx-quit" @click="quitCircle(circle, i)">退出
                </view>
              </view>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </scroll-view>
    </view>

  </view>
</template>

<script>
import CircleItem from "../../components/circle-item/circle-list.vue";
import http from '../../common/request';
import UniSwipeActionItem
  from "@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue";

export default {
  components: {UniSwipeActionItem, CircleItem},
  data() {
    return {}
  },
  methods: {
    onFocusSearch() {
      uni.navigateTo({
        url: "/pages/circle/circle-add"
      })
    },
    onCreateNewGroup() {
      uni.navigateTo({
        url: "/pages/circle/circle-edit"
      })
    },

    deleteCircle(circleId, i) {
      uni.showModal({
        title: '警告',
        content: '确定要解散该圈子吗？所有成员和动态都将会删除！',
        success: (res) => {
          if (res.confirm) {
            http({
              url: `/circle/${circleId}`,
              method: 'DELETE',
            }).then(() => {
              this.circleStore.myCircles.splice(i, 1)
              uni.showToast({
                title: "圈子已解散",
                icon: 'none'
              });
            })
          } else if (res.cancel) {

          }
        }
      });
    },

    quitCircle(circle, i) {
      uni.showModal({
        title: '注意',
        content: '确定要退出 ' + circle.name + ' 吗？',
        success: (res) => {
          if (res.confirm) {
            http({
              url: `/circle/quit/${circle.id}`,
              method: 'DELETE',
            }).then(() => {
              uni.showToast({
                title: "你已退出圈子 " + circle.name,
                icon: 'none'
              });
            })
          } else if (res.cancel) {

          }
        }
      });
    }
  },

  computed: {
    mine() {
      return this.userStore.userInfo;
    },
  }

}
</script>

<style lang="scss" scoped>
.xw-book-wrapper {
  padding: 10rpx 0 10rpx;
  display: flex;
  width: 100%;
}

.xw-book-sort {
  padding: 0 24rpx;
  flex: 1;
  line-height: 60rpx;
  background-color: #fafafa;
  font-size: 26rpx;
}

.group {
  position: relative;
  border: #dddddd solid 1px;
  display: flex;
  flex-direction: column;

  .nav-bar {
			padding: 2rpx 10rpx;
    display: flex;
    align-items: center;
    background-color: white;

    .nav-search {
      flex: 1;
    }

    .nav-add {
      cursor: pointer;
    }
  }

  .group-tip {
    position: absolute;
    top: 400rpx;
    padding: 50rpx;
    text-align: left;
    line-height: 50rpx;
    color: #10AEFF;
    font-size: 30rpx;
  }

  .group-items {
    flex: 1;
    padding: 0;
    border: #dddddd solid 1px;
    overflow: hidden;
    position: relative;

    .scroll-bar {
      height: 100%;
    }
  }
}

.favorites-wx-view {
  background-color: #00aaff;
}

.favorites-wx-delete {
  background-color: #F76260;
}

.favorites-wx-quit {
  background-color: #FFBE00;
}

.favorites-wx-action-item-btn {
  color: #fff;
  padding: 0 44rpx;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.favorites-wx-action-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.favorites-uni-swipe-action-item {
  margin-bottom: 2rpx;
}

.favorites-uni-swipe-action-item:nth-last-child(1) {
  margin-bottom: 0;
}

.favorites-wx-tips {
  width: 100%;
  color: #999;
  font-size: 24rpx;
  text-align: center;
}
</style>